<template>
  <view class="container">
	<!--头部-->
	<view class="head">
		<!-- 顶部学校定位 -->
		<view class="location-bar">
		  <view class="location-left">
		    <image src="/static/location.png" class="icon-location" />
		    <text class="location-text">{{ location }}</text>
		    <image src="/static/arrow-right.png" class="icon-arrow" @click="chooseLocation" />
		  </view>
		</view>
		
		<!-- 搜索栏 -->
		<view class="search-row">
		  <view class="search-box">
		    <image src="/static/search.png" class="icon-search" />
		    <input
		      class="search-input"
		      v-model="searchValue"
		      placeholder="请输入搜索内容"
		      confirm-type="search"
		      @confirm="onSearch"
		    />
		  </view>
		  <button class="search-btn" @click="onSearch">搜索</button>
		  <image src="/static/scan.png" class="icon-scan" @click="onScan" />
		</view>	
	</view>
	
	<!-- 轮播图 -->
	<swiper class="banner-swiper" indicator-dots autoplay interval="3000" duration="500">
	  <swiper-item v-for="(item, index) in banners" :key="index">
	    <image :src="item" class="banner-img" />
	  </swiper-item>
	</swiper>
	
    <!-- 公告栏 -->
    <view class="notice-bar">
      <view class="notice-title">
        <view class="notice-title-left">
          <text class="notice-main">物业</text>
          <text class="notice-highlight">公告</text>
          <text class="notice-divider">|</text>
          <text class="notice-update">实时更新</text>
        </view>
        <view class="notice-more-area" @click="goNotice">
          <text class="notice-more">更多</text>
          <image src="/static/arrow-right-gray.png" class="notice-arrow-icon" />
        </view>
      </view>
      <view class="notice-list">
        <view class="notice-item" v-for="(item, index) in notices" :key="index">
          <text class="notice-tag" :class="item.level">{{ item.levelText }}</text>
          <text class="notice-content">{{ item.content }}</text>
          <image src="/static/arrow-right-gray.png" class="notice-arrow-icon" />
        </view>
      </view>
    </view>

    <!-- 功能服务 -->
    <view class="service-section">
      <text class="service-title">功能服务</text>
      <view class="service-grid">
        <view
          class="service-item"
          v-for="(item, index) in services"
          :key="index"
          @click="goService(item.url)"
        >
          <image :src="item.icon" class="service-icon" />
          <text class="service-label">{{ item.label }}</text>
        </view>
      </view>
    </view>
	<CustomBottomNav></CustomBottomNav>
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import CustomBottomNav from '../common/tabar.vue'
import { usePublicStore } from '../../store/public'

const location = ref('哈尔滨信息工程学院(哈东校区)')
const searchValue = ref('')
const currentTab = ref(0)
const userInfo = usePublicStore();

const banners = [
  '/static/banner1.jpg',
  '/static/banner2.jpg',
  '/static/banner3.jpg'
]

const notices = [
  { level: 'urgent', levelText: '紧急', content: '近期天气炎热，提醒师生注意防火安全，严禁在校园内违规使用电器；要加强校园内消防设施设备的检查维护，确保正常使用。' },
  { level: 'normal', levelText: '重要', content: '本月25号至27号，学校将举办运动会，需提前做好活动场地的布置、清洁及设施设备维护工作，确保活动顺利进行。' }
]

const services = [
  { icon: '/static/clock.png', label: '上班打卡', url: '/pages/index/clock/clock' },
  { icon: '/static/knowledge.png', label: '知识库', url: '/pages/index/knowledge/knowledge' },
  { icon: '/static/feedback.png', label: '反馈单', url: '/pages/index/feedback/feedback' },
  { icon: '/static/tools.png', label: '工具', url: '/pages/index/tools/tools' },
  { icon: '/static/map.png', label: '校园地图', url: '/pages/index/map/map' },
  { icon: '/static/contact.png', label: '通讯录', url: '/pages/index/contact/contact' },
  { icon: '/static/material.png', label: '物料', url: '/pages/index/material/material' },
  { icon: '/static/leave.png', label: '请假', url: '/pages/index/leave/leave' }
]

const bottomNavs = [
  { icon: '/static/home.png', iconActive: '/static/home-active.png', label: '首页', url: '/pages/index/index' },
  { icon: '/static/order.png', iconActive: '/static/order-active.png', label: '工单', url: '/pages/order/order' },
  { icon: '/static/check.png', iconActive: '/static/check-active.png', label: '巡检', url: '/pages/check/check' },
  { icon: '/static/user.png', iconActive: '/static/user-active.png', label: '我的', url: '/pages/user/user' }
]

// 自动定位
const getLocation = () => {
  uni.getLocation({
    type: 'wgs84',
    success: function (res) {
      // 这里建议用高德/腾讯逆地理编码API获取地名
      // 这里只做演示
      // location.value = '定位到的地址'
    }
  })
}

// 选择地点
const chooseLocation = () => {
  uni.chooseLocation({
    success: function (res) {
      location.value = res.name || res.address
    }
  })
}

// 搜索
const onSearch = () => {
  uni.showToast({ title: '搜索功能开发中', icon: 'none' })
}

// 扫一扫
const onScan = () => {
  uni.scanCode({
    success: function (res) {
      uni.showToast({ title: '扫码成功', icon: 'success' })
    }
  })
}

// 【跳转公告】
const goNotice = () => {
  uni.navigateTo({ url: '/pages/index/notice/notice' })
}

// 跳转功能服务
const goService = (url) => {
  uni.navigateTo({ url })
}

// 跳转底部导航
const goBottomNav = (url, index) => {
  currentTab.value = index
  uni.reLaunch({ url })
}

// 页面加载时自动定位
getLocation()

onMounted(()=>{
	userInfo.setCurrentTab(0);
})

</script>

<style scoped>
.container {
  padding-bottom: 200rpx;
  background-color: #EFEFEF;
  padding-top: 185rpx;
}
.head {
  background-color: #fff;
  padding-bottom: 1rpx;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  box-shadow: 0 2rpx 8rpx #eee;
}
/*顶部学校定位*/
.location-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 30rpx;
  font-weight: bold;
  padding: 24rpx 24rpx 0 24rpx;
  background: #fff;
}
.location-left {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.icon-location {
  width: 32rpx;
  height: 30rpx;
  margin-right: 8rpx;
}
.location-text {
  color: #222;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.icon-arrow {
  width: 28rpx;
  height: 28rpx;
  margin-left: 8rpx;
  margin-top: 8rpx;
}

/*搜索栏*/
.search-row {
  display: flex;
  align-items: center;
  margin: 30rpx 24rpx 27rpx 24rpx;
}
.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  background: #F5F5F5;
  border-radius: 32rpx;
  padding: 0 0 0 20rpx;
  height: 64rpx;
  margin-right: 20rpx;
}
.icon-search {
  width: 32rpx;
  height: 32rpx;
  margin-right: 12rpx;
}
.search-input {
  border: none;
  background: transparent;
  font-size: 28rpx;
  color: #969696;
}
.search-btn {
  background: #3D76FF;
  color: #fff;
  border-radius: 32rpx;
  font-size: 28rpx;
  padding: 0 30rpx;
  margin-right: 30rpx;
  height: 64rpx;
  line-height: 64rpx;
  border: none;
}
.icon-scan {
  width: 48rpx;
  height: 48rpx;
  margin-right: 10rpx;
}

/*轮播图*/
.banner-swiper {
  width: 100%;
  height: 400rpx;
  position: relative;
  z-index: 1;
}
.banner-img {
  width: 100%;
  height: 400rpx;
}

/*物业公告*/
.notice-bar {
  background: #fff;
  margin: -60rpx 30rpx 0 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx #eee;
  padding: 24rpx;
  position: relative;
  z-index: 2;
}
.notice-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 18rpx;
}
.notice-title-left {
  display: flex;
  align-items: center;
}
.notice-main {
  font-size: 42rpx;
  font-weight: bold;
  color: #333;
}
.notice-highlight {
  font-size: 42rpx;
  font-weight: bold;
  color: #3D76FF;
  margin-left: 2rpx;
}
.notice-divider {
  color: #9A9A9A;
  margin: 0 12rpx;
  font-size: 28rpx;
  font-weight: normal;
}
.notice-update {
  color: #9A9A9A;
  font-size: 23rpx;
  font-weight: normal;
  margin-top: 10rpx;
}
.notice-more-area {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.notice-more {
  color: #9A9A9A;
  font-size: 26rpx;
  font-weight: normal;
  margin-right: 8rpx;
}
.notice-arrow-icon {
  width: 20rpx;
  height: 20rpx;
  margin-top: 5rpx;
}
.notice-list {
  margin-top: 10rpx;
}
.notice-item {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
  font-size: 28rpx;
  color: #333;
  background: transparent;
}
.notice-tag {
  border-radius: 8rpx;
  padding: 2rpx 16rpx;
  margin-right: 16rpx;
  font-size: 24rpx;
  color: #fff;
  flex-shrink: 0;
}
.notice-tag.urgent {
  background: #ff4d4f;
}
.notice-tag.normal {
  background: #faad14;
}
.notice-content {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 5rpx;
}

/*功能服务*/
.service-section {
  background: #fff;
  margin: 20rpx 30rpx 0 30rpx;
  border-radius: 16rpx;
  padding: 24rpx 0 24rpx 0;
}
.service-title {
  font-size: 42rpx;
  font-weight: bold;
  margin-left: 15rpx;
  padding: 20rpx;
  color: #333;
}
.service-grid {
  margin-top: 15rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.service-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 26rpx;
}
.service-icon {
  width: 110rpx;
  height: 110rpx;
  background: #f2f3f5;
  border-radius: 50%;
}
.service-label {
  font-size: 27rpx;
  color: #000;
}

/*底部导航*/
.bottom-nav {
  position: fixed;
  bottom: 0;
  padding-bottom: 10rpx;
  width: 100%;
  height: 130rpx;
  background: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2rpx 8rpx #eee;
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nav-icon {
  width: 50rpx;
  height: 50rpx;
}
.nav-label {
  font-size: 26rpx;
  color: #000;
  margin-top: 4rpx;
}
.nav-label.active {
  color: #3D76FF;
}
</style>